<template>
    <view v-if="showType">
        <view class="mark" @tap="close"></view>
        <view class="box">
            <block v-for="(item, index) in radioGroup" :key="index">
                <view class="type-item" @tap="chooseItem(item, index)">
                    <view :class="item.iconChoosed" style="color:#24C79C;margin-right:20rpx;" v-if="item.choosed == true"></view>
                    <view :class="item.iconNoChoosed" style="color:#24C79C;margin-right:20rpx;" v-if="item.choosed == false"></view>
                    <view>{{item.value}}</view>
                    <view>{{message}}</view>
                </view>
            </block>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        showType:{
            type : Boolean,
            default : false
        },
    },
    data() {
        return {
            radioGroup: [
                {
                    id: 1,
                    iconChoosed: 'iconfont icon-iconfontzhizuobiaozhun0267',
                    iconNoChoosed: 'iconfont icon-iconfontzhizuobiaozhun0268',
                    value: '我要退货退款',
                    choosed: false
                },
                {
                    id: 2,
                    iconChoosed: 'iconfont icon-iconfontzhizuobiaozhun0267',
                    iconNoChoosed: 'iconfont icon-iconfontzhizuobiaozhun0268',
                    value: '我要退款（无需退货）',
                    choosed: false
                }
            ],
            type: '',
        }
    },
    methods: {
        chooseItem(item, index) {
            if(item.choosed == true) {
                // this.radioGroup[index + 1] = true
                // this.radioGroup[index] = false
                item.choosed = true;
                let arr = this.radioGroup.filter((value) => {
                    return value.id != item.id
                })
                arr.forEach((item) => {
                    item.choosed = false
                })
            }
            if(item.choosed == false) {
                item.choosed = true;
                let arr = this.radioGroup.filter((value) => {
                    return value.id != item.id
                })
                arr.forEach((item) => {
                    item.choosed = false
                })
            }
            this.type = item.value
            // console.log(this.type)
            if(this.type) {
                setTimeout(() => {
                    this.$emit('close', this.type)
                },200)
            }
        },
        close() {
            this.$emit('close', this.type);
        }
    }
}
</script>

<style>
    .mark {
        position: fixed;
        top: 0rpx;
        bottom: 0rpx;
        left: 0rpx;
        right: 0rpx;
        background:rgba(0,0,0,1);
        opacity: 0.3;
    }
    .box {
        position: fixed;
        top: 517rpx;
        left: 159rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 377rpx;
        height: 131rpx;
        padding: 50rpx 0rpx 50rpx 54rpx;
        background:rgba(255,255,255,1);
        border-radius: 10rpx;
        color: #333333;
        font-size: 28rpx;
        z-index: 999;
    }
    .type-item {
        /* height: 100%; */
        display: flex;
        /* flex-direction: column; */
        justify-content: left;
        line-height: 48rpx;
    } 
    /* .type-item .label{
        display: flex;
        justify-content: left;
    } */
    
</style>